<template>
  <div class="saleForm">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="name" label="商品售价" prop="price" required>
        <a-input v-model="form.price" />
      </a-form-model-item>
      <a-form-model-item label="商品折扣价" prop="price_off" required>
        <a-input v-model="form.price_off" />
      </a-form-model-item>
      <a-form-model-item label="商品库存" prop="inventory" required>
        <a-input v-model="form.inventory" />
      </a-form-model-item>
      <a-form-model-item label="计量单位" prop="unit" required>
        <a-input v-model="form.unit" />
      </a-form-model-item>
      <a-form-model-item label="商品相册" prop="images">
        <a-upload
          :action="
            'https://mallapi.duyiedu.com/upload/images?appkey=' +
            $store.state.user.appkey
          "
          list-type="picture-card"
          :file-list="fileList"
          @preview="handlePreview"
          @change="handleChange"
          name="avatar"
        >
          <div v-if="fileList.length < 8">
            <a-icon type="plus" />
            <div class="ant-upload-text">Upload</div>
          </div>
          <a-modal
            :visible="previewVisible"
            :footer="null"
            @cancel="handleCancel"
          >
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </a-upload>
      </a-form-model-item>

      <a-form-model-item :wrapperCol="{ span: 20 }">
        <a-button type="default" @click="prev">上一步</a-button>
        <a-button type="primary" @click="next">提交</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
export default {
  props: ["form"],
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 10 },
      //   form: {
      //     price: 0, // 价格
      //     price_off: 0, // 折扣价格
      //     unit: "", // 单位
      //     inventory: 0, //商品库存
      //     images: [], // 图片
      //   },
      rules: {},
      previewVisible: false,
      previewImage: "",
      fileList: [],
    };
  },
  created() {
    this.form.images.forEach((r) => {
      console.log(r);
      this.fileList = this.form.images.map((item, index) => {
        return {
          uid: index,
          name: `image-${index}.png`,
          status: "done",
          url: item,
        };
      });
    });
  },
  methods: {
    prev() {
      this.$emit("prev", this.form);
    },
    next() {
      this.$emit("next", this.form);
    },
    handlePreview() {},
    // handleChange() {
    //   this.isloading = true;
    // },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ file, fileList }) {
      //   console.log(fileList);
      if (file.status === "done") {
        this.form.images.push(file.response.data.url);
      } else if (file.status === "removed") {
        var url = file.response.data.url;
        this.form.images = this.form.images.filter((r) => {
          return r !== url;
        });
      }
      this.fileList = fileList;
    },
  },
};
</script>

<style>
</style>